<template>
  <h1>{{ sum }}</h1>
  <button @click="sum++">点击加1</button>
  <h1>{{ msg }}</h1>
  <button @click="msg+='!'">点击加！</button>
  <h1>{{ person.name }}</h1>
  <h1>{{ person.age }}</h1>
  <h1>{{ person.job.j1.salary }}</h1>
  <button @click="person.name+='-'">点击修改名字</button>
  <button @click="person.age++">点击修改年龄</button>
  <button @click="person.job.j1.salary++">涨</button>
</template>
  
<script>
import { watch,ref,watchEffect} from "vue";

export default {
  name: "Demo",

  setup() {
    let sum = ref(0);
    let msg=ref('你好阿')
    let person=ref({
      name:'林润钿',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })


    //一上来就执行了 默认开启了immediate
    watchEffect(()=>{
     /*  const x1=sum.value
      const x2=person.value.job.j1.salary   //如果是ref对象的话 那么要读对象的属性，就需要.value 或者开启深度监视
      console.log('执行了'); */
      if(sum.value==18)
      {
        sum.value=0
      }
      console.log('执行了');
    })
   

    return {
      sum,
      msg,
      person
    };
  },
};
</script>
  
  <style>
</style>
  